const express  = require("express");
// 引入app实例
import createApp from "../app";
import { renderToString } from 'vue/server-renderer'

const server = express()

// express 部署静态资源
server.use(express.static('build'))

server.get('/' , async (req ,res)=>{

    // 实例化app
    const app = createApp()

    // 服务器编译html
    const appStringHtml = await renderToString(app)

    const htmlString = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <h1>Vue3 Serve Side Render</h1>
      <div id="app">
        ${appStringHtml}
      </div>
      // 这里用script标签引入打包后的客户端代码
      <script src="/client/client_bundle.js"></script>
    </body>
    </html>
    `

    res.send(htmlString)
})

server.listen(5506 , ()=>{
    console.log(`5506 服务已启动~`);
})